<template>
	<view class="mainpadding beijingse">
		<view class="zwtimg flexcenter" v-if="!list.data.length">
			<image src="../../static/image/system/zwt.png" mode=""></image>
		</view>
		<view class="shangjianj mainpadding ffffff radius" v-if="list.data.length" v-for="item in list.data" :key="item.id" @click="tzdpxq(item.id)">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="shilitu margin_right2">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="">
						<view class="titletext">{{item.name}}</view>
						<view class="huisetext margin_top1">{{item.tel}}</view>
						<view class="huisetext" style="margin-top: 4rpx;">{{item.address}}</view>
					</view>
				</view>
				<view class="flexright">
					<view class="dpicon margin_right2" @click.stop="openmap(item)">
						<image src="../../static/image/system/ditu.png" mode=""></image>
					</view>
					<view class="dpicon" @click.stop="phone(item.tel)">
						<image src="../../static/image/system/dianhua.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lat: "34.41065670",
				lon: "112.41065670",
				// latitude:"",
				// longitude:"",
			}
		},
		// onShow() {
		// 	// #ifdef APP-PLUS
		// 	this.getlocation()
		// 	// #endif
		// 	// #ifdef MP-WEIXIN
		// 	this.init()
		// 	// #endif
		// },
		// onLoad() {
		// 	this.lat = uni.getStorageSync("lat")
		// 	this.lon = uni.getStorageSync("lon")
		// },
		onShow() {
			this.getlocation()
		},
		methods: {
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("获取经纬度信息", res)
						_this.lat = res.latitude
						_this.lon = res.longitude
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.init()
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.address_detail, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString(),
					success(ress) {
						console.log("拨打电话成功", ress)
					},
					fail(err) {
						console.log("拨打电话失败", err)
					}

				})
			},
			// 商品列表
			init(isPage, page, value) {
				let _this = this;
				httpRequest.request('/api/shop/xxShop', 'POST', {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lon: this.lon,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						res.data.data.forEach(item => {
							Object.assign(item, {
								show: false
							})
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
					if (value == 1) {
						uni.stopPullDownRefresh()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转详情
			tzdpxq(id) {
				uni.navigateTo({
					url: '/pages/homepage/dianpulxxxzyd?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dpicon {
		width: 51rpx;
		height: 51rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.shilitu {
		width: 147rpx;
		height: 114rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.shangjianj {
		margin-top: 30rpx;
	}

	.shangjianj:first-child {
		margin-top: 0rpx;
	}
</style>
